<template>
  <div>
    <div class="warrap" :class="isAllRight?'text-danger':'text-muted'">
      <div class="content">
        <h5>答案已提交，得分:</h5>
        <h1 style="font-size:8em">{{finalScore}}</h1>
        <h3>谢谢参与!</h3>
      </div>
    </div>
    <div class="line">{{$store.state.footerTip}}</div>
  </div>
</template>


<script>
export default {
  name: "Ending",
  computed: {
    finalScore() {
      return (this.$store.state.score / this.$store.state.content.length) * 100;
    },
    isAllRight() {
      return this.$store.state.score == this.$store.state.content.length;
    }
  }
};
</script>

<style scoped>
.warrap {
  height: calc(100vh - 24px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3em 2em;
}
.content {
  display: inline-block;
  text-align: center;
}
</style>

